<template>
    <div id="two-c">
        <div class="two-l-4 two-l-0">
            <ul class="index-ul">
                <div class="top-s" style="font-size: 14px;">最近通过人员</div>
                <div class="set-con">
                    <ul class="set-con-box">
                        <div class="con-box">
                            <li class="con-box-img"><img src="./img/1.jpeg" /></li>
                            <li class="con-box-c">
                                <p>张珊</p>
                                <p>2023-06-05</p>
                                <p>11:45:23</p>
                            </li>
                        </div>
                        <div class="con-box">
                            <li class="con-box-img"><img src="./img/2.jpeg" /></li>
                            <li class="con-box-c">
                                <p>莉丝</p>
                                <p>2023-06-05</p>
                                <p>11:45:23</p>
                            </li>
                        </div>
                        <div class="con-box">
                            <li class="con-box-img"><img src="./img/1.jpeg" /></li>
                            <li class="con-box-c">
                                <p>张珊</p>
                                <p>2023-06-05</p>
                                <p>11:45:23</p>
                            </li>
                        </div>
                        <div class="con-box">
                            <li class="con-box-img"><img src="./img/2.jpeg" /></li>
                            <li class="con-box-c">
                                <p>莉丝</p>
                                <p>2023-06-05</p>
                                <p>11:45:23</p>
                            </li>
                        </div>
                        <div class="con-box">
                            <li class="con-box-img"><img src="./img/1.jpeg" /></li>
                            <li class="con-box-c">
                                <p>张珊</p>
                                <p>2023-06-05</p>
                                <p>11:45:23</p>
                            </li>
                        </div>
                        <div class="con-box">
                            <li class="con-box-img"><img src="./img/2.jpeg" /></li>
                            <li class="con-box-c">
                                <p>莉丝</p>
                                <p>2023-06-05</p>
                                <p>11:45:23</p>
                            </li>
                        </div>
                    </ul>
                    <div class="people-info">
                        <div class="top-s" style="margin-top: 10px;font-size: 14px;">人员信息</div>
                        <div class="tab-s">
                            <div class="scroll">
                                <table class="table-1">
                                    <tr>
                                        <th class="td-1">工号</th>
                                        <th class="td-2">姓名</th>
                                        <th class="td-3">部门</th>
                                        <th class="td-4">通过时间</th>
                                        <th class="td-5">识别图像</th>
                                    </tr>
                                </table>
                                <list-scroll class="box" :speed="0.4">
                                    <div class="list">
                                        <div class="item-s" v-for="(item,index) in dataList" :key="index">
                                            <div class="item-s-c td-1"> {{ item.num }} </div>
                                            <div class="item-s-c td-2"> {{ item.name }} </div>
                                            <div class="item-s-c td-3"> {{ item.location }} </div>
                                            <div class="item-s-c td-4" style="line-height: 30px;"> {{ item.timeInfo }} </div>
                                            <div class="item-s-c td-5"> <img style="display: block; width: 40px; height: 25px;margin: 2px auto 0 auto;" :src="item.captureImg" /> </div>
                                        </div>
                                    </div>
                                </list-scroll>
                            </div>
                        </div>
                    </div>
                </div>
            </ul>
        </div>

        <div class="two-l-4 two-l-1">
            <ul class="index-ul">
                <div class="top-s" style="font-size: 14px;">会议室信息</div>
                <div class="set-con">
                    <div class="tab-s">
                        <div class="scroll">
                            <table class="table-1">
                                <tr>
                                    <th class="td-1">会议室名称</th>
                                    <th class="td-2">会议室类型</th>
                                    <th class="td-3">会议室状态</th>
                                    <th class="td-4">最近预约使用时间</th>
                                </tr>
                            </table>
                            <list-scroll class="box" :speed="0.3">
                                <div class="list">
                                    <div class="item-s" v-for="(item,index) in dataListOne" :key="index">
                                        <div class="item-s-c td-2"> {{ item.name }} </div>
                                        <div class="item-s-c td-3"> {{ item.location }} </div>
                                        <div v-if="item.start" class="item-s-c td-2" style="color: rgba(0,255,40,0.6);"> {{ item.statusNam }} </div>
                                        <div v-else class="item-s-c td-2" style="color: rgba(255,179,0,0.6);"> {{ item.statusNam }} </div>
                                        <div class="item-s-c td-2"> {{ item.timeInfo }} </div>
                                    </div>
                                </div>
                            </list-scroll>
                        </div>
                    </div>
                </div>
            </ul>
        </div>
    </div>
  </template>
  
  <script>
  import ListScroll from "./listScroll"
  import zs from './img/1.jpeg'
  import ls from './img/2.jpeg'
  export default {
    name: 'two-c',
    data() {
      return {
        dataList: [
            {num:'001', name:'张珊',location:'财务部',start: false, timeInfo: '2023-06-05 14:53:23', captureImg: zs},
            {num:'002', name:'李斯',location:'生产1部',start: true, timeInfo: '2023-06-05 14:53:23', captureImg: ls},
            {num:'003', name:'王武',location:'生产2部',start: false, timeInfo: '2023-06-05 14:53:23', captureImg: zs},
            {num:'004', name:'赵谦',location:'生产3部',start: false, timeInfo: '2023-06-05 14:53:23', captureImg: ls},
            {num:'005', name:'孙力',location:'采购部',start: false, timeInfo: '2023-06-05 14:53:23', captureImg: zs},
            {num:'006', name:'周武',location:'人事部',start: true, timeInfo: '2023-06-05 14:53:23', captureImg: ls},
            {num:'007', name:'郑旺',location:'法务部',start: false, timeInfo: '2023-06-05 14:53:23', captureImg: zs},
            {num:'001', name:'张珊',location:'财务部',start: false, timeInfo: '2023-06-05 14:53:23', captureImg: ls},
            {num:'002', name:'李斯',location:'生产1部',start: true, timeInfo: '2023-06-05 14:53:23', captureImg: zs},
            {num:'003', name:'王武',location:'生产2部',start: false, timeInfo: '2023-06-05 14:53:23', captureImg: ls},
            {num:'004', name:'赵谦',location:'生产3部',start: false, timeInfo: '2023-06-05 14:53:23', captureImg: zs},
            {num:'005', name:'孙力',location:'采购部',start: false, timeInfo: '2023-06-05 14:53:23', captureImg: ls},
            {num:'006', name:'周武',location:'人事部',start: true, timeInfo: '2023-06-05 14:53:23', captureImg: zs},
            {num:'007', name:'郑旺',location:'法务部',start: false, timeInfo: '2023-06-05 14:53:23', captureImg: ls},
        ],
        dataListOne: [
            { name:'1号会议室', location: '财务部', start: false, statusNam: '已预定', timeInfo: '2023-06-05 14:53:23'},
            { name:'2号会议室',location:'生产1部',start: true, statusNam: '空闲', timeInfo: '2023-06-05 14:53:23'},
            { name:'3号会议室',location:'生产2部',start: false, statusNam: '已预定', timeInfo: '2023-06-05 14:53:23'},
            { name:'4号会议室',location:'生产3部',start: false, statusNam: '已预定', timeInfo: '2023-06-05 14:53:23'},
            { name:'5号会议室',location:'采购部',start: false, statusNam: '已预定', timeInfo: '2023-06-05 14:53:23'},
            { name:'6号会议室',location:'人事部',start: true, statusNam: '空闲', timeInfo: '2023-06-05 14:53:23'},
            { name:'7号会议室',location:'法务部',start: false, statusNam: '已预定', timeInfo: '2023-06-05 14:53:23'},
            { name:'8号会议室',location:'财务部',start: true, statusNam: '空闲', timeInfo: '2023-06-05 14:53:23'},
            { name:'1号会议室', location: '财务部', start: false, statusNam: '已预定', timeInfo: '2023-06-05 14:53:23'},
            { name:'2号会议室',location:'生产1部',start: true, statusNam: '空闲', timeInfo: '2023-06-05 14:53:23'},
            { name:'3号会议室',location:'生产2部',start: false, statusNam: '已预定', timeInfo: '2023-06-05 14:53:23'},
            { name:'4号会议室',location:'生产3部',start: false, statusNam: '已预定', timeInfo: '2023-06-05 14:53:23'},
            { name:'5号会议室',location:'采购部',start: false, statusNam: '已预定', timeInfo: '2023-06-05 14:53:23'},
            { name:'6号会议室',location:'人事部',start: true, statusNam: '空闲', timeInfo: '2023-06-05 14:53:23'},
            { name:'7号会议室',location:'法务部',start: false, statusNam: '已预定', timeInfo: '2023-06-05 14:53:23'},
            { name:'8号会议室',location:'财务部',start: true, statusNam: '空闲', timeInfo: '2023-06-05 14:53:23'},
        ],
      };
    },
    components: { ListScroll },
    mounted() {
      let that = this
      that.$nextTick(() => {
          that.fontSizeFun(14)
      })
    },
    methods: {
      fontSizeFun(val,initWidth=1920){
          const nowClientWidth = document.documentElement.clientWidth
          return val * (nowClientWidth/initWidth) + 'px'
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  #two-c{
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 99%;
    margin: auto;
    ::-webkit-scrollbar{
        width: 2px;
        height: 2px;
    }
    ::-webkit-scrollbar-track {
        background: rgba($color: #f3f4f9, $alpha: 0.1);
        border-radius: 2px;
    }
    ::-webkit-scrollbar-thumb {
        background: rgba($color:  #c8d2e0, $alpha: 0.1);
        border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb:hover {
        background: rgba($color:   #b4b4b4, $alpha: 0.1);
    }
    ::-webkit-scrollbar-corner {
        background: rgba($color:    #c8d2e0, $alpha: 0.1);
    }
    // 火狐
    * {
        scrollbar-color: #c8d2e0 #f3f4f9;
        /* 滑块颜色  滚动条背景颜色 */
        scrollbar-width: thin;
        /* 滚动条宽度有三种：thin、auto、none */
    }
    .set-con{
        width: 100%;
        height: 92%;
        overflow: hidden;
        .set-con-box{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            width: 98%;
            margin: 10px auto 0 auto;
            .con-box{
                width: 16%;
                .con-box-img{
                    width: 100%;
                    // height: 10vh;
                    overflow: hidden;
                    img{
                        display: block;
                        width: 100%;
                    }
                }
                .con-box-c{
                    p{
                        text-align: center;
                        margin-top: 10px;
                    }
                }
            }
        }
        .people-info{
            // border: 1px solid red;
        }
    }
    .set-con:hover{
        overflow: hidden;
    }
    .set-flex{
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    ul{
        margin: 0;
        padding: 0;
    }
    li{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .two-l-0{
        // margin-bottom: 10px;
        height: 66.4%;
    }
    .two-l-1{
        // margin-bottom: 10px;
        height: 32.6%;
    }
    .index-ul{
        background: rgba($color: #005ABF, $alpha: 0.2);
        width: 100%;
        height: 100%;
        padding-bottom: 10px;
        .top-s{
            padding: 10px 0 10px 10px;
            font-weight: 600;
            // font-size: 14px;
            font-style: oblique;
            background: rgba($color: #005ABF, $alpha: 0.4);
        }
        // 安全生产天数
        .two-li{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            li{
                width: 32%;
                img{
                    display: block;
                    margin: auto;
                    width: 75%;
                }
            }
            .two-l-1-n{
                span{
                    display: block;
                    width: 100%;
                    text-align: center;
                    // font-size: 14px;
                    font-weight: 600;
                    margin-top:10px;
                }
                p{
                    width: 100%;
                    text-align: center;
                    margin-top: 8px;
                    // font-size: 14px;
                }
            }
        }

        // 人员信息
        .index-r{
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            align-items: center;
            width: 96%;
            border: 1px solid rgb(2,123,236);
            margin: 10px auto 0 auto;
            .index-r-title{
                width: 30%;
                span{
                    display: block;
                    color: #00E5FF;
                    font-size: 14px;
                    font-weight: 600;
                    font-style: oblique;
                    width: 100%;
                    text-align: center;
                    background: rgb(8 ,70 ,143);
                    padding: 5px 0;
                }
                p{
                    width: 100%;
                    font-size: 14px;
                    text-align: center;
                    background: rgb(3 ,44 ,90);
                    padding: 5px 0;
                    .index-r-p{
                        font-weight: 600;
                        margin-left: 4px;
                    }
                }
            }
            .index-r-s{
                width: 30%;
                span{
                    display: block;
                    width: 100%;
                    text-align: center;
                    i{
                        color: #00FF28;
                        margin-left: 4px;
                    }
                }
            }
            .line{
                width: 1px;
                height: 24px;
                background: linear-gradient(to top, rgba($color: #0A275D, $alpha: 0) 0%,#00E5FF 50%, rgba($color: #0A275D, $alpha: 0) 100%);
            }
        }
    }
    .tab-s{
        width: 92%;
        height: 90%;
        margin: 10px auto 0 auto;
        overflow: hidden;
        .table-1{
            position: relative;
            width: 100%;
            text-align: center;
            background: rgba($color: #153863, $alpha: 0.4);
            z-index: 1;
            tr{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                th{
                    text-align: center;
                    width: 50%;
                }
            }
        }

        .td-1,.td-2,.td-3{
            // width: 20%;
            height: 30px;
            line-height: 30px;
        }
        .td-4,.td-5{
            width: 20%;
            img{
                width: 20px;
                height: 20px;
                margin-top: 5px;
            }
        }
        .box {
            height: 300px;
            .list {
                width: 100%;
                .item-s {
                    display: flex;
                    justify-content: space-between;
                    cursor: pointer;
                    &:hover {box-shadow: inset 0px 0px 16px 0px #14B5FF;color: #14E0FF;}
                    color: #FFFFFF;
                    table-layout:fixed;
                    border-bottom: 1px solid rgb(21,136,189);
                    .item-s-c{
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        text-align: center;
                        width: 50%;
                    }
                }
            }
        }
    }
  }
  </style>